<template>
      <div class="container">
          <header>
            <div class="logo">
              <img class="imgLogo" src="\systemImage\Immortality.png" alt="logo">
            </div>
            <div class="des">
              <h1 class="headerTitle">NoQuestion</h1>
            </div>
            <div class="userInfo">
              <text-button>积分</text-button>
              <text-button>后台</text-button>
              <text-button>申请</text-button>
              <text-button>消息</text-button>
              <text-button>设置</text-button>
              
            </div>
            <div class="userContainer">
              <div class="userCard">
                <div class="userDisplay">
                  <el-avatar class="userAvatar" :size="45" :src="`${apiBaseUrl}/${userStore.currentUser?.avatar}`"></el-avatar>
                  <span class="userName">{{ userStore.currentUser?.username }}</span>
                </div>
              </div>
            </div>
            
          </header>
          <nav>
              <div class="InputNav"><input type="搜索"></div>
              <div class="CateNav"><navCate  :TreeArray='categoryStores.categories' /></div>
              
          </nav>
          <aside>
            <div class="ads">
              <AD/>
              <AD title="XMedia" adImg="/ADs/majong.webp"/>
            </div>
          </aside>
          <main>
            <div class="questionSimDisplayCard">
              <div class="dataCard">
                
              </div>
              <div class="contentCard">
                  <RouterView/>
              </div>
                
            </div>
            <div class="informationDisplayCard">
                <h2>学会使用NoQuestion</h2>
                <h4>Learn How to use NoQuestion</h4>
                <article>
                  
                </article>
            </div>
            <div class="secondInformationDisplayCard">

            </div>
            

          </main>
          <footer></footer>
      </div>
</template>

<script setup lang="ts">
import textButton from '../components/imm-text-button.vue';
import AD from '../components/imm-ad.vue';
import navCate from '../components/imm-menu.vue'
import {onMounted, ref} from 'vue'
import { useCategoryStore } from '../stores/categoryStore';
import { useQuestionStore } from '../stores/questionStore';
import QuestionCard from '../components/questionCard.vue';
import { useUserStore } from '../stores/userStore';

const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;
const categoryStores = useCategoryStore();
const QuestionStore = useQuestionStore();
const userStore=useUserStore();
userStore.fetchCurrentUser();

onMounted(async ()=>{

  categoryStores.resetState();
  await categoryStores.fetchAllCategories();
  await QuestionStore.getQuestionSimplify();
  console.log(userStore.currentUser)
  console.log(`${apiBaseUrl}/${userStore.currentUser?.avatar}`)

})



</script>

<style scoped>

.no-copy {
  /* 禁止文本选择（兼容各浏览器） */
  -webkit-user-select: none; /* Safari、Chrome 等 */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE、Edge */
  user-select: none; /* 标准语法 */
  
}

.qsCard{
  background-color: rgb(0, 0, 0,0.75);
}

.container{
    display: grid;
    width: 100%;
    min-height: 100%;
    grid-template-columns: 250px 2fr 1fr;  
    grid-template-rows: 70px 30px 1fr 140px;
    grid-template-areas: 
    "header header header"
    "aside nav nav"
    "aside main main"
    "footer footer footer"
    ;
    gap: 15px;
    background-color: rgb(0, 0, 0);
    
}

header{
  grid-area: header;
  background-color: rgb(24, 39, 72);
  display: flex;
  flex-flow: row;
  gap: 5px;
}

header h1{
  height: 100%;
  margin: 0px;
  display: flex;
  align-items: center;
  font-size: 180%;
}

.logo{
  display: flex;
  justify-content: center;
  align-items: center;
  flex:1
}

.des{
  pointer-events: none;
  padding-left: 2%;
  color: rgb(237, 249, 255);
  font-size: 18px;
  text-shadow: 0 0 10px rgba(52, 152, 219, 0.8), 
                   0 0 20px rgba(52, 152, 219, 0.6), 
                   0 0 30px rgba(52, 152, 219, 0.4);
  flex:3
  
}

.userInfo{
  display: flex;
  justify-content: right;
  margin-right: 30px;
  align-items: center;
  gap: 30px;
  flex:6
}

.userContainer{
  display: flex;
  flex: 1;
  justify-content: right;
  align-items: center;
  padding-right: 30px;
  
}

.userCard{
  padding: 2.5px;
  background-color: rgba(0, 141, 180, 0.2);
  border-radius: 30px;
  box-shadow: 1px 1px 6px rgb(0, 0, 0);
  cursor: pointer;
}

.userDisplay{
  display: flex;
  justify-content: center;
  align-items: center;
}

.userName{
  color: rgb(255, 255, 255,0.8);
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: 100%;
  margin: 10px;
  padding: 5px;
}

.imgLogo{
  max-width: 35%;
}



nav{
  grid-area: nav;
  background-color: rgba(101, 112, 169, 0);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  color: rgba(243, 231, 231, 0.763);
  font-size: 14px;
  font-weight: 400;
  flex-grow: 2,8;
}

.InputNav{
  flex: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.CateNav{
  flex: 8;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  position: relative;
}

aside{
  grid-area: aside;
  background-color: rgba(0, 0, 0, 0);
  border-right: 1px solid rgba(255, 255, 255, 0.4);
}

main{
  grid-area: main;
  background-color: rgba(43, 43, 43, 0);
  display: grid;
  grid-template-columns: 4fr 1fr;
  grid-template-rows: 300px 1fr;
  grid-template-areas: 
  "QCard MCard"
  "QCard SCard";
  gap: 4px;
}

.questionSimDisplayCard{
  grid-area: QCard;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding-top: 20px;
  padding-bottom: 20px;
  border-radius: 15px;
  background-color: rgba(26, 26, 26, 0.74);
}

.questionSimDisplayCard .dataCard{
  width: 98%;
  min-height: 50px;
}

.questionSimDisplayCard .contentCard{
  width: 98%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}


.informationDisplayCard{
  grid-area: MCard;
  border-radius: 15px;
  background-color: rgba(26, 26, 26, 0.74);
  color: rgb(255, 255, 255,0.9);
  padding: 8px;
}

.secondInformationDisplayCard{
  grid-area: SCard;
}

footer{
  grid-area: footer;
  background-color: rgb(42, 42, 70);
}

.ads{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  padding-top: 20px;
  padding-left: 30px;
  padding-right: 30px;
}

</style>